<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/theme/default/layer.css"
      rel="stylesheet"
    />
    <style>
      .box {
        width: 500px;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-8">
            <input
              type="text"
              id="user"
              class="form-control"
              placeholder="用户名"
            />
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label"
            >密码</label
          >
          <div class="col-sm-8">
            <input
              type="password"
              id="pwd"
              class="form-control"
              placeholder="密码"
            />
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary" id="loginBtn">
              登录
            </button>
          </div>
        </div>
      </form>
    </div>
    <script src="./js/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
    <script>
      // 获取节点
      let userEle = document.getElementById("user");
      let pwdEle = document.getElementById("pwd");
      let loginBtnEle = document.getElementById("loginBtn");

      // 绑定单击事件
      loginBtnEle.addEventListener("click", async function () {
        // 获取用户名和密码
        let username = userEle.value;
        let password = pwdEle.value;
        // 发送axios-post请求
        let { data } = await axios({
          method: "post",
          url: "http://127.0.0.1:5000/login",
          // 请求体参数
          data: {
            username,
            password,
          },
        });
        let { message, code } = data;
        if (code === 20000) {
          layer.msg(message, { icon: 6 });
        } else {
          layer.msg(message, { icon: 5 });
        }
      });
    </script>
  </body>
</html>
